import Link from 'next/link'
import React from 'react'

import styles from './style.module.scss'

interface Props {
  flag: boolean
  active: number
  id: string
  onClick: (v: number) => void
}

const UserNav = (props: Props) => {
  const className = (current: number) => {
    return props.active === current ? ' ' + styles.bule : ' '
  }

  return (
    <ul className={styles.select}
      onClick={(e: any) => {
        e.target.value && props.onClick(e.target.value)
      }} >
      <Link href={"/user/" + props.id + '/dynamic'} passHref>
        <li value={1} className={className(1)}>动态</li>
      </Link>
      {props.flag && <Link href={"/user/" + props.id + '/collect'} passHref>
        <li value={2} className={className(2)}>收藏</li>
      </Link>}
      {props.flag && <Link href={"/user/" + props.id + "/dingdan"} passHref>
        <li value={3} className={className(3)}>订单</li>
      </Link>}
      <Link href={"/user/" + props.id + "/followed"} passHref>
        <li value={4} className={className(4)}>关注</li>
      </Link>
      <Link href={"/user/" + props.id + "/goods"} passHref>
        <li value={5} className={className(5)}>商品</li>
      </Link>
    </ul>
  )
}

export default UserNav
